<?php

// If no public token is provided, go to the full list page
if (!isset($_REQUEST["publicToken"]) || !$_REQUEST["publicToken"]) {
    header("Location: show_all.php");
    exit;
}

require_once("functions.php");
connectToDb();

$designList = getFeaturedDesigns();
$requestedDesign = null;

if (isset($_REQUEST["publicToken"])) {
    foreach ($designList as $design) {
        if ($design["public_token"] == $_REQUEST["publicToken"]) {
            $requestedDesign = $design;
        }
    }
    
    if (!$requestedDesign) {
        $requestedDesign = getDesignFromPublicToken($_REQUEST["publicToken"]);
        if ($requestedDesign) {
            // If another design has been requested, put it at the start of the list
            $designList = array_merge(
                array($requestedDesign),
                $designList
            );
        }
    }
}

if (!$requestedDesign) {
    $requestedDesign = $designList[0];
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>PlaygroundIdeas - <?php echo $requestedDesign["name"]; ?></title>
		<link rel="icon" type="image/png" href="images/favicon.ico" />
        <!-- main page styles -->
        <link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			
			#mainContent { 
				background-color: #f7f7f7; 
				border: 4px solid #f7f7f7;
				overflow: auto;
			}
			
			#leftcol {
				background:white;
				width: 500px;
				float:left;
				margin: 10px 10px 10px 10px;
				padding: 10px;
			}
			
			#rightcol {
				float:left;
				width:380px;
				margin: 10px 10px 10px 0px;
				padding-left: 20px;
			}
			
			div.cleared {
				clear: both;
			}
			
			font.pinkHeading {
				color: #db136c;
				font-size: 18pt;
				font-weight: 900;
			}
			
			font.notes {
				color: #333333;
				font-size: 12pt;
			}
			
			#downloadCutNPaste {
				position: relative;
				top: -7px;
				margin-left: 5px;			
			}
			
			#exampleImages {
				margin-top: 10px;
                text-align: center;
			}
			
			.playgroundImage {
				margin: 2px;
                display: inline-block;
			}
            
            .playgroundImage img {
                height: 67px;
                /* max-width: 92px; -- 5 items on a row */
				max-width: 117px; /* 4 items on a row, default */
                border: 2px solid grey;
                background-color: white;
                cursor: pointer !important;
            }
            .playgroundImage img:hover, .playgroundImage.selected img {
                border: 2px solid #DB136C;
            }
            
			div.fullImage {
                height: 310px;
            }
            
			div.fullImage img.displayed {
                border: 2px solid grey;
                max-height: 300px;
                max-width: 480px;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}
            
            div.fb-like {
                margin-top: 15px;
            }
			
			#cutNpasteElements{
				text-align: 
			}
			
		</style>
    </head>

    <body>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        
        <div id="mainContent">
            
            <div id="leftcol">
                <div class="fullImage"><img class="displayed" src="<?php echo $requestedDesign["image"]; ?>" /></div>
                <div id="exampleImages">			
					<?php
						$count = 0;
						foreach ($designList as $design) {
							$selectedClass = ($design["public_token"] == $requestedDesign["public_token"] ? "selected" : "");
							echo "<a href='show_design.php?publicToken=" . $design["public_token"] . "' class='playgroundImage " . $selectedClass . "' title='" . $design["name"] . "'>";
							echo "<img src='" . $design["thumbnail_image"] . "' />";
							echo "</a>";
							
							// Only 5 images fit here!
							// If there are 5 images, set max-width of each image to be less, 
							//		to fill all 5 items on a 1 row
							$count++;
							if ($count >= 5) {				
								echo '<style type="text/css">';
								echo '.playgroundImage img {max-width: 92px; !important}';
								echo '</style>';
								
								break;
							}
						}
					?>
                </div>
            </div>
            
            <div id="rightcol">
                <font class="pinkHeading">Name</font><br/>
                    <font class="notes"><?php echo $requestedDesign["name"]; ?></font><br/><br/>
                <!--<font class="pinkHeading">Description</font><br/>
                    <font class="notes"><?php // echo $requestedDesign["description"]; ?></font><br/><br/>-->
                <font class="pinkHeading">Size</font><br/>
                    <font class="notes">Width <?php echo $requestedDesign["size_width"]; ?> meters x Length <?php echo $requestedDesign["size_length"]; ?> meters</font>
                <br/><br/>
                <a href="index.php?publicToken=<?php echo $requestedDesign["public_token"]; ?>"><div class="image"><img src="images/useThis_up.png" /></div></a>
                <div style="margin: 0px; padding:0px; clear: both; height: 6px">&nbsp;</div>
                <a href="index.php"><div class="image"><img src="images/start_up.png" /></div></a>
                <div style="margin: 0px; padding:0px; clear: both; height: 6px">&nbsp;</div>
                <div class="image" id="cutNpasteElements"><img id="pdf_icon" src="images/pdf_icon.png" /><font class="notes" id="downloadCutNPaste">Download 'cut and paste' elements</font></div>
                
                <div class="fb-like" data-send="false" data-width="300" data-show-faces="true"></div>
            </div>
            
        </div> <!--end mainContent -->

    </body>
</html>